<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <title>jQuery-Placeholder</title>
    <style>
    body {font-family: arial, sans-serif;}
        input, textarea {padding:4px; width:225px; font-family: arial, sans-serif; font-size: 12px;}
        textarea {width: 425px; height: 200px;}
        .placeholder {color: #aaa;}
    </style>
</head>
<body>
    <h1>jQuery-Placeholder</h1>
    <p>This plugin supports a fallback for browsers that do not yet support the HTML5 placeholder attribute.</p>
    <h2>Demo form</h2>
    <form action="">
        <p>
            <input type="text" placeholder="username" name="username" class="jq_watermark">
        </p>
        <p>
            <input type="password" placeholder="password" name="password">
        </p>
        <p>
            <textarea placeholder="A textarea placeholder" name="text"></textarea>
        </p>
        <p>
            <button type="submit">Go</button>
        </p>
    </form>
<script>
    $('input[placeholder], textarea[placeholder]').placeholder();
</script>
</body>
</html>